import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        // body: HomeContent(),
        body: HomeContent(),
      ),
    );
  }
}
class HomeContent extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
     
    return Column( 
        children: <Widget>[
              Row(
                children: <Widget>[
                  Expanded(
                    child: Container(
                      height: 180.0, 
                      color: Colors.black,
                      child: Text("data"),
                    ),
                  )
                ],
              ),
              SizedBox(height: 10),
              Row(
                // 用两个 Expanded 来先分成 左右俩边
                children: <Widget>[
                  Expanded(
                    flex: 2,
                    child: Container(
                      height: 180.0,
                      child: Image.network("https://www.itying.com/images/flutter/1.png",fit:BoxFit.cover),
                    ),
                  ), 
                  SizedBox(width: 10),
                  Expanded(
                    flex: 1,
                    // 用两个 ListView 来先分成 上下俩边
                    child:Container(
                        height: 180,
                        child: ListView(
                            children: <Widget>[
                              Container(
                                height: 85.0,
                                child: Image.network("https://www.itying.com/images/flutter/2.png",fit:BoxFit.cover),
                              ),
                              SizedBox(height: 10),
                              Container(
                                height: 85.0,
                                child: Image.network("https://www.itying.com/images/flutter/3.png",fit:BoxFit.cover),
                              )
                            ],
                        ),
                    ),
                  )
                ],
              )
        ],
      );
  }
}

// Expanded 布局 （常用，类似于web 里面的 flex 布局）
class ExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Expanded(
          flex: 1,
          child:  IconBox(Icons.home,color:Colors.blue),
        ),
        Expanded(
          flex: 2,
          child:  IconBox(Icons.access_alarm,color:Colors.green),
        ),
        Expanded(
          flex: 1,
          child:  IconBox(Icons.search,color:Colors.red),
        )
        
    ]);
  } 
}

// 垂直布局组件 （常用）
class ColumnWidget extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
     
    return Container(
      width: 300.0,
      height: 300.0,
      color: Colors.pink,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconBox(Icons.home,color:Colors.blue),
          IconBox(Icons.access_alarm,color:Colors.green),
          IconBox(Icons.search,color:Colors.red),
        ]
      )
    );
  }
}
// 水平布局组件 （常用）
class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        IconBox(Icons.home,color:Colors.blue),
        IconBox(Icons.access_alarm,color:Colors.green),
        IconBox(Icons.search,color:Colors.red),
    ]);
  } 
}
class IconBox extends StatelessWidget {
  IconData icon;
  double size = 30;
  Color color = Colors.white;
  IconBox(this.icon,{this.size,this.color});
  @override
  Widget build(BuildContext context) {
     
    return Container(
      width: 100.0,
      height: 100.0,
      color:this.color,
      child: Center(
        child: Icon(this.icon,size: this.size,color: Colors.white),
      ),
    );
  }
   
}

class Paddings extends StatelessWidget {
  List<Widget> _getData (){
    var tempList = listData.map((value){
      return Padding(
        padding: EdgeInsets.fromLTRB(10,10,0,0),
        child:Image.network(value['imageUrl'] , fit: BoxFit.cover) ,
      ); 
    });
    return tempList.toList();
}
  @override
  Widget build(BuildContext context) {
     
    return GridView.count(
      padding: EdgeInsets.fromLTRB(0,0,10,10),
      crossAxisCount: 2,
      childAspectRatio: 1.7,
      children: this._getData(), 
    );
  } 
}